<script setup>
import { RouterView, useRouter } from 'vue-router'
import DSLogo from '@/components/DSLogo.vue'
import { Icon } from 'tdesign-vue-next'
const router = useRouter()
</script>

<template>
  <t-layout class="container">
    <t-header class="header" height="64px">
      <DSLogo style="margin-right: auto"></DSLogo>
      <t-button theme="default" variant="text" shape="square" class="icon-btn">
        <icon name="logo-github" />
      </t-button>
      <t-button theme="default" variant="text" shape="square" class="icon-btn">
        <icon name="help-circle" />
      </t-button>
      <t-button
        theme="default"
        variant="text"
        shape="square"
        class="icon-btn"
        style="margin-right: 30px"
      >
        <icon name="setting" />
      </t-button>
    </t-header>
    <t-layout class="context">
      <t-aside style="background: none; width: 40%; min-width: 580px" class="aside">
        <t-space direction="vertical" class="space">
          <p class="text" style="font-size: 45px">登录到 RadianceM</p>
          <p class="text" style="font-size: 35px">数字化公寓选调系统</p>
          <t-space direction="horizontal" size="4">
            <p style="color: rgb(173, 173, 173)">没有账号？</p>
            <t-link theme="default" @click="router.push('/register')">注册新账号</t-link>
          </t-space>
        </t-space>
        <RouterView />
      </t-aside>
      <t-content></t-content>
    </t-layout>
    <t-footer height="12px" class="footer"></t-footer>
  </t-layout>
</template>

<style scoped lang="scss">
@import '../../style/common.scss';
.container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  display: flex;
  background-color: rgb(255, 255, 255);
  background-image: url('../../assets/img/loginBackground.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .header {
    @include cf;
    flex-direction: row;
    backdrop-filter: blur(20px);
    background-color: rgba(255, 255, 255, 0.1);

    .icon-btn {
      margin: 0 10px;
    }
  }

  .context {
    position: relative;
    background: none;

    .aside {
      position: relative;
      @include cf;
      flex-direction: column;

      .space {
        position: relative;
        @include cf;
        width: 85%;
        padding: 0;
        margin: 15px 0px;

        .input {
          position: relative;
          width: 100%;
          margin: 3px 0;
        }
        .text {
          margin: 10px 0;
        }

        .space-div {
          position: relative;
          @include cf;
          flex-direction: row;
          width: 100%;
        }
      }
    }
  }

  .footer {
    margin-top: auto;
    backdrop-filter: blur(20px);
    background-color: white;
    background-color: rgba(255, 255, 255, 0.02);
  }
}
</style>
